---
layout: default
title: Photon · Components
---

<div class="sub-masthead">
  <div class="container">
    {% include nav.html %}
    <div class="subpage-header-content">
      <h1 class="subpage-title">Components</h1>
      <p class="subpage-lead">Design patterns that serve as the basic building blocks of our application</p>
    </div>
  </div>
</div>

<section class="component-section">
  <div class="container">
    <div class="col-group">
      <div class="col">
        <h2>Bars</h2>
        <p class="component-description">Bars are placed at the top and bottom of core sections of your application and allow you to drag the application
          window around your desktop.</p>

{% highlight html %}
<header class="toolbar toolbar-header">
  <h1 class="title">Header</h1>
</header>

...

<footer class="toolbar toolbar-footer">
  <h1 class="title">Footer</h1>
</footer>
{% endhighlight %}
      </div>
      <div class="col">
        <div class="example-container example-component-container example-component-window">
          <iframe class="component-example" src="/components/bars.html"></iframe>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="component-section">
  <div class="container">
    <div class="col-group">
      <div class="col">
        <h2>Bars with actions</h2>
        <p class="component-description">Actions can be added to bars in the form of buttons and button-groups. These can be used give access to tools or provide additional functionality by using context menus.</p>

{% highlight html %}
<header class="toolbar toolbar-header">
  <h1 class="title">Header with actions</h1>

  <div class="toolbar-actions">
    <div class="btn-group">
      <button class="btn btn-default" type="button">
        <span class="icon icon-home"></span>
      </button>
      <button class="btn btn-default" type="button">
        <span class="icon icon-folder"></span>
      </button>
      <button class="btn btn-default active" type="button">
        <span class="icon icon-cloud"></span>
      </button>
      <button class="btn btn-default" type="button">
        <span class="icon icon-popup"></span>
      </button>
      <button class="btn btn-default" type="button">
        <span class="icon icon-shuffle"></span>
      </button>
    </div>

    <button class="btn btn-default" type="button">
      <span class="icon icon-home icon-text"></span>
      Filters
    </button>

    <button class="btn btn-default btn-dropdown pull-right" type="button">
      <span class="icon icon-megaphone"></span>
    </button>
  </div>
</header>

...

<footer class="toolbar toolbar-footer">
  <div class="toolbar-actions">
    <button class="btn btn-default" type="button">
      Cancel
    </button>

    <button class="btn btn-primary pull-right" type="button">
      Save
    </button>
  </div>
</footer>
{% endhighlight %}
      </div>
      <div class="col">
        <div class="example-container example-component-container example-component-window">
          <iframe class="component-example" src="/components/bars-actions.html"></iframe>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="component-section">
  <div class="container">
    <div class="col-group">
      <div class="col">
        <h2>Bars with tabs</h2>
        <p class="component-description">Tabs give the user the ability to create mutiple instances of your application's window. Clicking on the tab switches to that
          instance. Hovering on a tab reveals the close icon.</p>

{% highlight html %}
<header class="toolbar toolbar-header">
  <h1 class="title">Header the tabs</h1>
</header>

<div class="tab-group">
  <div class="tab-item">
    <span class="icon icon-cancel icon-close-tab"></span>
    Tab
  </div>
  <div class="tab-item active">
    <span class="icon icon-cancel icon-close-tab"></span>
    Tab active
  </div>
  <div class="tab-item">
    <span class="icon icon-cancel icon-close-tab"></span>
    Tab
  </div>
  <div class="tab-item tab-item-fixed">
    <span class="icon icon-plus"></span>
  </div>
</div>
{% endhighlight %}
      </div>
      <div class="col">
        <div class="example-container example-component-container example-component-window">
          <iframe class="component-example" src="/components/bars-tabs.html"></iframe>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="component-section">
  <div class="container">
    <div class="col-group">
      <div class="col">
        <h2>Navs</h2>
        <p class="component-description">Navs allow your users to jump between sections of your application. Users select an item in the nav list
          and act on it in the main part of the application's window.</p>

{% highlight html %}
<nav class="nav-group">
  <h5 class="nav-group-title">Favorites</h5>
  <a class="nav-group-item active">
    <span class="icon icon-home"></span>
    connors
  </a>
  <span class="nav-group-item">
    <span class="icon icon-download"></span>
    Downloads
  </span>
  <span class="nav-group-item">
    <span class="icon icon-folder"></span>
    Documents
  </span>
  <span class="nav-group-item">
    <span class="icon icon-signal"></span>
    AirPlay
  </span>
  <span class="nav-group-item">
    <span class="icon icon-print"></span>
    Applications
  </span>
  <span class="nav-group-item">
    <span class="icon icon-cloud"></span>
    Desktop
  </span>
</nav>
{% endhighlight %}
      </div>
      <div class="col">
        <div class="example-container example-component-container example-component-window">
          <iframe class="component-example" src="/components/navs.html"></iframe>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="component-section">
  <div class="container">
    <div class="col-group">
      <div class="col">
        <h2>Lists</h2>
        <p class="component-description">Lists can be used for organizing data, showing collections of users, or a series of controls.</p>

{% highlight html %}
<ul class="list-group">
  <li class="list-group-header">
    <input class="form-control" type="text" placeholder="Search for someone">
  </li>
  <li class="list-group-item">
    <img class="img-circle media-object pull-left" src="/assets/img/avatar.jpg" width="32" height="32">
    <div class="media-body">
      <strong>List item title</strong>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </li>
  <li class="list-group-item">
    <img class="img-circle media-object pull-left" src="/assets/img/avatar2.png" width="32" height="32">
    <div class="media-body">
      <strong>List item title</strong>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </li>
  ...
</ul>
{% endhighlight %}
      </div>
      <div class="col">
        <div class="example-container example-component-container example-component-window">
          <iframe class="component-example" src="/components/lists.html"></iframe>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="component-section">
  <div class="container">
    <div class="col-group">
      <div class="col">
        <h2>Buttons</h2>
        <p class="component-description">Buttons come in many flavors and should be used for main call to actions, to submit forms, or trigger behaviors.</p>

{% highlight html %}
<button class="btn btn-default" type="button">Default</button>
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-positive" type="button">Positive</button>
<button class="btn btn-negative" type="button">Negative</button>
<button class="btn btn-warning" type="button">Warning</button>
{% endhighlight %}
      </div>
      <div class="col">
        <div class="example-container example-component-container buttons-component">
          <iframe class="component-example" src="/components/buttons.html"></iframe>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="component-section">
  <div class="container">
    <div class="col-group">
      <div class="col">
        <h2>Buttons large</h2>
        <p class="component-description">Large buttons are perfect for when you have a lot of space.</p>

{% highlight html %}
<button class="btn btn-large btn-default" type="button">Default</button>
<button class="btn btn-large btn-primary" type="button">Primary</button>
<button class="btn btn-large btn-positive" type="button">Positive</button>
<button class="btn btn-large btn-negative" type="button">Negative</button>
<button class="btn btn-large btn-warning" type="button">Warning</button>
{% endhighlight %}
      </div>
      <div class="col">
        <div class="example-container example-component-container buttons-component">
          <iframe class="component-example" src="/components/buttons-large.html"></iframe>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="component-section">
  <div class="container">
    <div class="col-group">
      <div class="col">
        <h2>Buttons mini</h2>
        <p class="component-description">Mini buttons work great in places where space is scarce.</p>

{% highlight html %}
<button class="btn btn-mini btn-default" type="button">Default</button>
<button class="btn btn-mini btn-primary" type="button">Primary</button>
<button class="btn btn-mini btn-positive" type="button">Positive</button>
<button class="btn btn-mini btn-negative" type="button">Negative</button>
<button class="btn btn-mini btn-warning" type="button">Warning</button>
{% endhighlight %}
      </div>
      <div class="col">
        <div class="example-container example-component-container buttons-component">
          <iframe class="component-example" src="/components/buttons-mini.html"></iframe>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="component-section">
  <div class="container">
    <div class="col-group">
      <div class="col">
        <h2>Buttons groups</h2>
        <p class="component-description">Connect a series of buttons together on a single line. Use these to toggle "modes" or mutually exclusive tools.</p>

{% highlight html %}
<div class="btn-group">
  <button class="btn btn-default" type="button">
    <span class="icon icon-home"></span>
  </button>
  ...
  <button class="active btn btn-default" type="button">
    <span class="icon icon-shuffle"></span>
  </button>
</div>

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-large btn-default" type="button">
    <span class="icon icon-home"></span>
  </button>
  ...
  <button class="active btn btn-large btn-default" type="button">
    <span class="icon icon-shuffle"></span>
  </button>
</div>

<!-- Mini button group -->
<div class="btn-group">
  <button class="btn btn-mini btn-default" type="button">
    <span class="icon icon-home"></span>
  </button>
  ...
  <button class="active btn btn-mini btn-default" type="button">
    <span class="icon icon-shuffle"></span>
  </button>
</div>
{% endhighlight %}
      </div>
      <div class="col">
        <div class="example-container example-component-container button-groups-component">
          <iframe class="component-example" src="/components/button-groups.html"></iframe>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="component-section">
  <div class="container">
    <div class="col-group">
      <div class="col">
        <h2>Forms</h2>
        <p class="component-description">Forms are great when you need to collect data from a user.
          Use form labels to describe the input field and use simple buttons to submit the form.</p>

{% highlight html %}
<form>
  <div class="form-group">
    <label>Email address</label>
    <input type="email" class="form-control" placeholder="Email">
  </div>
  <div class="form-group">
    <label>Password</label>
    <input type="password" class="form-control" placeholder="Password">
  </div>
  <div class="form-group">
    <label>Description</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>
  <select class="form-control">
    <option>Option one</option>
    <option>Option two</option>
    <option>Option three</option>
    <option>Option four</option>
    <option>Option five</option>
    <option>Option six</option>
    <option>Option seven</option>
    <option>Option eight</option>
  </select>
  <div class="checkbox">
    <label>
      <input type="checkbox"> This is a checkbox
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> This is a checkbox too
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="radios" checked>
      Keep your options open
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="radios">
      Be sure to remember to check for unknown unknowns
    </label>
  </div>
  <div class="form-actions">
    <button type="submit" class="btn btn-form btn-default" type="button">Cancel</button>
    <button type="submit" class="btn btn-form btn-primary" type="submit">OK</button>
  </div>
</form>
{% endhighlight %}
      </div>
      <div class="col">
        <div class="example-container example-component-container forms-component">
          <iframe class="component-example" src="/components/forms.html"></iframe>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="component-section">
  <div class="container">
    <div class="col-group">
      <div class="col">
        <h2>Tables</h2>
        <p class="component-description">For showing tabular data, tables are your best bet. Zebra striping is optional.</p>

{% highlight html %}
<table class="table-striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Kind</th>
      <th>File Size</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>photon.css</td>
      <td>CSS</td>
      <td>28K</td>
    </tr>
    <tr>
      <td>photon.css</td>
      <td>CSS</td>
      <td>28K</td>
    </tr>
    <tr>
      <td>photon.css</td>
      <td>CSS</td>
      <td>28K</td>
    </tr>
    ...
    <tr>
      <td>photon.css</td>
      <td>CSS</td>
      <td>28K</td>
    </tr>
  </tbody>
</table>
{% endhighlight %}
      </div>
      <div class="col">
        <div class="example-container example-component-container example-component-window">
          <iframe class="component-example" src="/components/tables.html"></iframe>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="component-section last-component-section">
  <div class="container">
    <div class="col-group">
      <div class="col">
        <h2>Icons</h2>
        <p class="component-description">The Entypo icon font by Daniel Bruce is included as the default icon set for Photon. There are over 200 icons to choose from.</p>

{% highlight html %}
<span class="icon icon-note"></span>
<span class="icon icon-note-beamed"></span>
<span class="icon icon-music"></span>
<span class="icon icon-search"></span>
<span class="icon icon-flashlight"></span>
<span class="icon icon-mail"></span>
<span class="icon icon-heart"></span>
<span class="icon icon-heart-empty"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star-empty"></span>
<span class="icon icon-user"></span>
<span class="icon icon-users"></span>
<span class="icon icon-user-add"></span>
<span class="icon icon-video"></span>
<span class="icon icon-picture"></span>
<span class="icon icon-camera"></span>
<span class="icon icon-layout"></span>
<span class="icon icon-menu"></span>
<span class="icon icon-check"></span>
<span class="icon icon-cancel"></span>
<span class="icon icon-cancel-circled"></span>
<span class="icon icon-cancel-squared"></span>
<span class="icon icon-plus"></span>
<span class="icon icon-plus-circled"></span>
<span class="icon icon-plus-squared"></span>
<span class="icon icon-minus"></span>
<span class="icon icon-minus-circled"></span>
<span class="icon icon-minus-squared"></span>
<span class="icon icon-help"></span>
<span class="icon icon-help-circled"></span>
<span class="icon icon-info"></span>
<span class="icon icon-info-circled"></span>
<span class="icon icon-back"></span>
<span class="icon icon-home"></span>
<span class="icon icon-link"></span>
<span class="icon icon-attach"></span>
<span class="icon icon-lock"></span>
<span class="icon icon-lock-open"></span>
<span class="icon icon-eye"></span>
<span class="icon icon-tag"></span>
<span class="icon icon-bookmark"></span>
<span class="icon icon-bookmarks"></span>
<span class="icon icon-flag"></span>
<span class="icon icon-thumbs-up"></span>
<span class="icon icon-thumbs-down"></span>
<span class="icon icon-download"></span>
<span class="icon icon-upload"></span>
<span class="icon icon-upload-cloud"></span>
<span class="icon icon-reply"></span>
<span class="icon icon-reply-all"></span>
<span class="icon icon-forward"></span>
<span class="icon icon-quote"></span>
<span class="icon icon-code"></span>
<span class="icon icon-export"></span>
<span class="icon icon-pencil"></span>
<span class="icon icon-feather"></span>
<span class="icon icon-print"></span>
<span class="icon icon-retweet"></span>
<span class="icon icon-keyboard"></span>
<span class="icon icon-comment"></span>
<span class="icon icon-chat"></span>
<span class="icon icon-bell"></span>
<span class="icon icon-attention"></span>
<span class="icon icon-alert"></span>
<span class="icon icon-vcard"></span>
<span class="icon icon-address"></span>
<span class="icon icon-location"></span>
<span class="icon icon-map"></span>
<span class="icon icon-direction"></span>
<span class="icon icon-compass"></span>
<span class="icon icon-cup"></span>
<span class="icon icon-trash"></span>
<span class="icon icon-doc"></span>
<span class="icon icon-docs"></span>
<span class="icon icon-doc-landscape"></span>
<span class="icon icon-doc-text"></span>
<span class="icon icon-doc-text-inv"></span>
<span class="icon icon-newspaper"></span>
<span class="icon icon-book-open"></span>
<span class="icon icon-book"></span>
<span class="icon icon-folder"></span>
<span class="icon icon-archive"></span>
<span class="icon icon-box"></span>
<span class="icon icon-rss"></span>
<span class="icon icon-phone"></span>
<span class="icon icon-cog"></span>
<span class="icon icon-tools"></span>
<span class="icon icon-share"></span>
<span class="icon icon-shareable"></span>
<span class="icon icon-basket"></span>
<span class="icon icon-bag"></span>
<span class="icon icon-calendar"></span>
<span class="icon icon-login"></span>
<span class="icon icon-logout"></span>
<span class="icon icon-mic"></span>
<span class="icon icon-mute"></span>
<span class="icon icon-sound"></span>
<span class="icon icon-volume"></span>
<span class="icon icon-clock"></span>
<span class="icon icon-hourglass"></span>
<span class="icon icon-lamp"></span>
<span class="icon icon-light-down"></span>
<span class="icon icon-light-up"></span>
<span class="icon icon-adjust"></span>
<span class="icon icon-block"></span>
<span class="icon icon-resize-full"></span>
<span class="icon icon-resize-small"></span>
<span class="icon icon-popup"></span>
<span class="icon icon-publish"></span>
<span class="icon icon-window"></span>
<span class="icon icon-arrow-combo"></span>
<span class="icon icon-down-circled"></span>
<span class="icon icon-left-circled"></span>
<span class="icon icon-right-circled"></span>
<span class="icon icon-up-circled"></span>
<span class="icon icon-down-open"></span>
<span class="icon icon-left-open"></span>
<span class="icon icon-right-open"></span>
<span class="icon icon-up-open"></span>
<span class="icon icon-down-open-mini"></span>
<span class="icon icon-left-open-mini"></span>
<span class="icon icon-right-open-mini"></span>
<span class="icon icon-up-open-mini"></span>
<span class="icon icon-down-open-big"></span>
<span class="icon icon-left-open-big"></span>
<span class="icon icon-right-open-big"></span>
<span class="icon icon-up-open-big"></span>
<span class="icon icon-down"></span>
<span class="icon icon-left"></span>
<span class="icon icon-right"></span>
<span class="icon icon-up"></span>
<span class="icon icon-down-dir"></span>
<span class="icon icon-left-dir"></span>
<span class="icon icon-right-dir"></span>
<span class="icon icon-up-dir"></span>
<span class="icon icon-down-bold"></span>
<span class="icon icon-left-bold"></span>
<span class="icon icon-right-bold"></span>
<span class="icon icon-up-bold"></span>
<span class="icon icon-down-thin"></span>
<span class="icon icon-left-thin"></span>
<span class="icon icon-right-thin"></span>
<span class="icon icon-up-thin"></span>
<span class="icon icon-ccw"></span>
<span class="icon icon-cw"></span>
<span class="icon icon-arrows-ccw"></span>
<span class="icon icon-level-down"></span>
<span class="icon icon-level-up"></span>
<span class="icon icon-shuffle"></span>
<span class="icon icon-loop"></span>
<span class="icon icon-switch"></span>
<span class="icon icon-play"></span>
<span class="icon icon-stop"></span>
<span class="icon icon-pause"></span>
<span class="icon icon-record"></span>
<span class="icon icon-to-end"></span>
<span class="icon icon-to-start"></span>
<span class="icon icon-fast-forward"></span>
<span class="icon icon-fast-backward"></span>
<span class="icon icon-progress-0"></span>
<span class="icon icon-progress-1"></span>
<span class="icon icon-progress-2"></span>
<span class="icon icon-progress-3"></span>
<span class="icon icon-target"></span>
<span class="icon icon-palette"></span>
<span class="icon icon-list"></span>
<span class="icon icon-list-add"></span>
<span class="icon icon-signal"></span>
<span class="icon icon-trophy"></span>
<span class="icon icon-battery"></span>
<span class="icon icon-back-in-time"></span>
<span class="icon icon-monitor"></span>
<span class="icon icon-mobile"></span>
<span class="icon icon-network"></span>
<span class="icon icon-cd"></span>
<span class="icon icon-inbox"></span>
<span class="icon icon-install"></span>
<span class="icon icon-globe"></span>
<span class="icon icon-cloud"></span>
<span class="icon icon-cloud-thunder"></span>
<span class="icon icon-flash"></span>
<span class="icon icon-moon"></span>
<span class="icon icon-flight"></span>
<span class="icon icon-paper-plane"></span>
<span class="icon icon-leaf"></span>
<span class="icon icon-lifebuoy"></span>
<span class="icon icon-mouse"></span>
<span class="icon icon-briefcase"></span>
<span class="icon icon-suitcase"></span>
<span class="icon icon-dot"></span>
<span class="icon icon-dot-2"></span>
<span class="icon icon-dot-3"></span>
<span class="icon icon-brush"></span>
<span class="icon icon-magnet"></span>
<span class="icon icon-infinity"></span>
<span class="icon icon-erase"></span>
<span class="icon icon-chart-pie"></span>
<span class="icon icon-chart-line"></span>
<span class="icon icon-chart-bar"></span>
<span class="icon icon-chart-area"></span>
<span class="icon icon-tape"></span>
<span class="icon icon-graduation-cap"></span>
<span class="icon icon-language"></span>
<span class="icon icon-ticket"></span>
<span class="icon icon-water"></span>
<span class="icon icon-droplet"></span>
<span class="icon icon-air"></span>
<span class="icon icon-credit-card"></span>
<span class="icon icon-floppy"></span>
<span class="icon icon-clipboard"></span>
<span class="icon icon-megaphone"></span>
<span class="icon icon-database"></span>
<span class="icon icon-drive"></span>
<span class="icon icon-bucket"></span>
<span class="icon icon-thermometer"></span>
<span class="icon icon-key"></span>
<span class="icon icon-flow-cascade"></span>
<span class="icon icon-flow-branch"></span>
<span class="icon icon-flow-tree"></span>
<span class="icon icon-flow-line"></span>
<span class="icon icon-flow-parallel"></span>
<span class="icon icon-rocket"></span>
<span class="icon icon-gauge"></span>
<span class="icon icon-traffic-cone"></span>
<span class="icon icon-cc"></span>
<span class="icon icon-cc-by"></span>
<span class="icon icon-cc-nc"></span>
<span class="icon icon-cc-nc-eu"></span>
<span class="icon icon-cc-nc-jp"></span>
<span class="icon icon-cc-sa"></span>
<span class="icon icon-cc-nd"></span>
<span class="icon icon-cc-pd"></span>
<span class="icon icon-cc-zero"></span>
<span class="icon icon-cc-share"></span>
<span class="icon icon-cc-remix"></span>
<span class="icon icon-github"></span>
<span class="icon icon-github-circled"></span>
<span class="icon icon-flickr"></span>
<span class="icon icon-flickr-circled"></span>
<span class="icon icon-vimeo"></span>
<span class="icon icon-vimeo-circled"></span>
<span class="icon icon-twitter"></span>
<span class="icon icon-twitter-circled"></span>
<span class="icon icon-facebook"></span>
<span class="icon icon-facebook-circled"></span>
<span class="icon icon-facebook-squared"></span>
<span class="icon icon-gplus"></span>
<span class="icon icon-gplus-circled"></span>
<span class="icon icon-pinterest"></span>
<span class="icon icon-pinterest-circled"></span>
<span class="icon icon-tumblr"></span>
<span class="icon icon-tumblr-circled"></span>
<span class="icon icon-linkedin"></span>
<span class="icon icon-linkedin-circled"></span>
<span class="icon icon-dribbble"></span>
<span class="icon icon-dribbble-circled"></span>
<span class="icon icon-stumbleupon"></span>
<span class="icon icon-stumbleupon-circled"></span>
<span class="icon icon-lastfm"></span>
<span class="icon icon-lastfm-circled"></span>
<span class="icon icon-rdio"></span>
<span class="icon icon-rdio-circled"></span>
<span class="icon icon-spotify"></span>
<span class="icon icon-spotify-circled"></span>
<span class="icon icon-qq"></span>
<span class="icon icon-instagram"></span>
<span class="icon icon-dropbox"></span>
<span class="icon icon-evernote"></span>
<span class="icon icon-flattr"></span>
<span class="icon icon-skype"></span>
<span class="icon icon-skype-circled"></span>
<span class="icon icon-renren"></span>
<span class="icon icon-sina-weibo"></span>
<span class="icon icon-paypal"></span>
<span class="icon icon-picasa"></span>
<span class="icon icon-soundcloud"></span>
<span class="icon icon-mixi"></span>
<span class="icon icon-behance"></span>
<span class="icon icon-google-circles"></span>
<span class="icon icon-vkontakte"></span>
<span class="icon icon-smashing"></span>
<span class="icon icon-sweden"></span>
<span class="icon icon-db-shape"></span>
<span class="icon icon-logo-db"></span>
{% endhighlight %}
      </div>
      <div class="col">
        <div class="example-container example-component-container icons-component">
          <iframe class="component-example" src="/components/icons.html"></iframe>
        </div>
      </div>
    </div>
  </div>
</section>
